import React, { Component } from "react";
import { Header, Button, Icon } from "react-native-elements";
import { withNavigation } from "react-navigation";
import { MyButton } from "./MyButton";

class CustomHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      navigation,
      hideBack,
      title,
      right,
      titleComponent,
      rightComponent,
      onRightClick
    } = this.props;
    let leftComponent = this.props.leftComponent;
    if (!leftComponent) {
      leftComponent = hideBack ? null : (
        <MyButton
          icon={<Icon name="left" type="antdesign" color="white" />}
          onPress={_ => navigation.goBack()}
        />
      );
    }
    return (
      <Header
        backgroundColor="tomato"
        statusBarProps={{ translucent: true }}
        leftComponent={leftComponent}
        centerComponent={
          title
            ? { text: title, style: { color: "white", fontSize: 18 } }
            : titleComponent
        }
        rightComponent={
          right ? (
            <MyButton
              icon={<Icon name={right} color="white" />}
              onPress={onRightClick}
            />
          ) : (
            rightComponent
          )
        }
      />
    );
  }
}

export default withNavigation(CustomHeader);
